<template>
  <div class="goods-total-box">
    <el-table class="tableSty"
              :data.sync="tableList"
              size="small"
              :border="print"
              :row-class-name="tableRowClassName"
              :show-header="false"
              style="border-left: 1px solid var(--prev-border-color-lighter)">
      <template v-for="(item, index) in columns">
        <el-table-column v-if="item.type === 'index'"
                         :key="`${item.prop}${index}`"
                         align="center"
                         width="50px"
                         :prop="item.prop">
        </el-table-column>
        <el-table-column v-else-if="item.prop === 'weight'"
                         :key="`${item.prop}${index}`"
                         :width="item.width || 'auto'">
          <template slot-scope="scope">
            <el-input v-if="
                scope.row[firstFiledName] === '合计' &&
                firstFiledName === 'barcode'
              "
                      v-model="scope.row[item.prop]"
                      oninput="this.value=(this.value.match(/\d{0,10}(\.\d{0,2})?/)||[''])[0];"
                      @input="changeWeight(scope.row)" />
            <span v-else>{{ scope.row[item.prop] }}</span>
          </template>
        </el-table-column>
        <el-table-column v-else-if="item.prop === 'volume'"
                         :key="`${item.prop}${index}`"
                         :width="item.width || 'auto'">
          <template slot-scope="scope">
            <el-input v-if="
                scope.row[firstFiledName] === '合计' &&
                firstFiledName === 'barcode'
              "
                      v-model="scope.row[item.prop]"
                      oninput="this.value=(this.value.match(/\d{0,10}(\.\d{0,2})?/)||[''])[0];"
                      @input="changeVolume(scope.row)" />
            <span v-else>{{ scope.row[item.prop] }}</span>
          </template>
        </el-table-column>
        <el-table-column v-else-if="item.prop === 'quantity'"
                         :key="`${item.prop}${index}`"
                         :width="item.width || 'auto'">
          <template slot-scope="scope">
            <span v-if="scope.row[firstFiledName] === '合计'">{{
              scope.row[item.prop]
            }}</span>
            <span v-else>{{ scope.row[item.prop] }}</span>
          </template>
        </el-table-column>
        <el-table-column v-else-if="item.prop === 'value'"
                         :key="`${item.prop}${index}`"
                         :width="item.width || 'auto'">
          <template slot-scope="scope">
            <el-input v-if="scope.row[firstFiledName] === '合计'"
                      v-model="scope.row[item.prop]"
                      oninput="this.value=(this.value.match(/\d{0,10}(\.\d{0,2})?/)||[''])[0];"
                      @input="changeValue(scope.row)" />
            <span v-else>{{ scope.row[item.prop] }}</span>
          </template>
        </el-table-column>
        <el-table-column v-else-if="item.prop === 'action'"
                         :key="`${item.prop}${index}`"
                         width="240px">
        </el-table-column>
        <el-table-column v-else-if="item.prop === 'barcode'"
                         :key="`${item.prop}${index}`"
                         :width="item.width || 'auto'">
          <template slot-scope="scope">
            <span>{{ scope.row[item.prop] }}
              <el-tooltip v-if="scope.row.barcode === '补差' && !print"
                          class="item"
                          effect="dark"
                          content="补差说明：运输中，货物因包装（木架、底托等）因素，相较于原本重量体积会产生额外的重量体积"
                          placement="top">
                <icon-svg class-name="iconSty"
                          icon-name="bangzhuzhongxin1"></icon-svg>
              </el-tooltip>
            </span>
          </template>
        </el-table-column>
        <el-table-column v-else-if="item.type === 'icon'"
                         :key="`${item.prop}${index}`"
                         :width="item.width || 'auto'">
          <template slot-scope="scope">
            <span>{{ scope.row[item.prop] }}
              <el-tooltip v-if="
                  (type === '40' || type === '50') &&
                  scope.row.exceptionQuantity != scope.row.signExceptionQuantity
                "
                          placement="top">
                <div slot="content">
                  签收异常详情
                  <div>发货总数量：{{ scope.row.quantity }}</div>
                  <div>实签总数量：{{ scope.row.signSignedQuantity }}</div>
                  <div>异常总数量：{{ scope.row.signExceptionQuantity }}</div>
                </div>
                <span>
                  <icon-svg slot="reference"
                            class="font-style"
                            class-name="iconClass"
                            icon-name="tishi" />
                </span>
              </el-tooltip>
            </span>
          </template>
        </el-table-column>
        <el-table-column v-else
                         :key="`${item.prop}${index}`"
                         :label="item.name"
                         :width="item.width || 'auto'"
                         :prop="item.prop">
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>
<script>
export default {
  name: "GoodsTotal",
  props: {
    type: {
      type: String,
      default: ""
    },
    print: {
      type: Boolean,
      default: false
    },
    firstFiledName: {
      type: String,
      default: "barcode"
    },
    totalList: {
      type: Array,
      default: () => []
    },
    columns: {
      type: Array,
      default: () => [
        { name: "#", type: "index", width: "50px" },
        { name: "物料编码", prop: "barcode" },
        { name: "物品名称", prop: "name" },
        { name: "规格", prop: "spec" },
        { name: "重量(公斤)", prop: "weight" },
        { name: "体积(方)", prop: "volume" },
        { name: "数量", prop: "quantity" },
        { name: "价值", prop: "value" },
        { name: "物品类型", prop: "goodsType" },
        { name: "批次", prop: "batchNo" },
        { name: "备注", prop: "remarks" },
        { name: "操作", prop: "action" }
      ]
    }
  },
  data () {
    return {
      tableList: []
    };
  },
  watch: {
    totalList: {
      immediate: true,
      handler (val) {
        this.tableList = val;
      }
    }
  },
  methods: {
    // 给table索引为0的行添加class
    tableRowClassName ({ row, rowIndex }) {
      if (rowIndex === 0) {
        return "balanceRow";
      }
      return "";
    },
    // 重量合计修改
    changeWeight (row) {
      if (row.weight === ".") {
        row.weight = null;
        this.tableList[0].weight = null;
      } else {
        this.tableList[0].weight = parseFloat(
          (row.weight - this.tableList[1].singleWeight).toFixed(2)
        );
      }
      this.$emit("totalDataAccount", this.tableList);
    },
    changeVolume (row) {
      if (row.volume === ".") {
        row.volume = null;
        this.tableList[0].volume = null;
      } else {
        this.tableList[0].volume = parseFloat(
          (row.volume - this.tableList[1].singleVolume).toFixed(2)
        );
      }
      this.$emit("totalDataAccount", this.tableList);
    },
    changeValue (row) {
      if (row.value === ".") {
        row.value = null;
      } else {
        this.tableList[0].value = parseFloat(
          (row.value - this.tableList[1].singleValue).toFixed(2)
        );
      }
      this.$emit("totalDataAccount", this.tableList);
    }
  }
};
</script>
<style scoped lang="scss">
.goods-total-box {
  padding-bottom: 56px;
}
.iconSty {
  font-size: 14px;
}
.tableSty {
  /deep/ .el-table__row {
    height: 60px;
  }
}
/deep/ .el-table .balanceRow {
  background-color: var(--prev-bg-grey);
}
</style>
